<template>
  <div>
    <!-- 关联医院 -->
    <div v-if="this.tab == '3'">
      <div class="listDiv">
        <el-table ref="tableData3" :data="tableData3" style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column label="医院名称" prop="name" align="center" />
          <el-table-column label="所属分公司" prop="tiket_count" align="center">
            <template slot-scope="scope">{{scope.row.offices.name}}</template>
          </el-table-column>
          <el-table-column label="所属城市" prop="tiket_count" align="center">
            <template slot-scope="scope">{{scope.row.citys.name}}</template>
          </el-table-column>
          <el-table-column label="创建时间" prop="created_at" align="center">
            <template slot-scope="scope">{{scope.row.created_at|dateFilter}}</template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center" />
        </el-table>
      </div>
      <div class="allCenter">
        <el-button type="primary" @click="handleSubmit" :disabled="disabled">保存</el-button>
      </div>
    </div>
    <!-- 配置关联项目 -->
    <div v-if="this.tab == '2'">
      <div class="mb_20" v-if="is_update">
        请选择关联项目：
        <el-button type="primary" @click="handlePrize">选择</el-button>
      </div>
      <div class="listDiv">
        <el-table ref="tableData" :data="tableData" style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column label="项目名称" prop="name" align="center" />
          <el-table-column label="项目描述" prop="descript" align="center" />
          <el-table-column label="零售价" prop="origin_price" align="center" />
          <el-table-column label="创建时间" prop="created_at" align="center">
            <template slot-scope="scope">{{scope.row.created_at|dateFilter}}</template>
          </el-table-column>
          <el-table-column label="关联医院" prop="hospital" align="center">
            <template slot-scope="scope">{{scope.row.hospital.name}}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="handleDelete(scope.$index)"
                v-if="is_update"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="allCenter">
        <el-button type="primary" @click="NextSubmit" :disabled="disabled">下一步</el-button>
      </div>
      <el-dialog title="关联项目" :visible.sync="dialogFormVisible" width="60%" @close="close" center>
        <el-form ref="form2" :model="form2" :inline="true" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="项目名称">
                <el-input v-model="form2.project_name" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查找</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="listDiv">
          <el-table
            ref="tableData1"
            :data="tableData1"
            style="width: 100%"
            :row-key="getRowKeys"
            height="250"
            @selection-change="handleSelectionChange"
          >
            <el-table-column fixed label="单选" type="index" width="50" align="center">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.id">{{scope.row.index}}</el-radio>
              </template>
            </el-table-column>
            <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true" /> -->
            <el-table-column fixed type="index" label="序号" width="50" align="center" />
            <el-table-column prop="name" label="项目名称" align="center" />
            <el-table-column prop="descript" label="项目描述" align="center" />
            <el-table-column prop="origin_price" label="零售价" align="center" />
            <el-table-column prop="created_at" label="创建时间" align="center">
              <template slot-scope="scope">{{scope.row.created_at|dateFilter}}</template>
            </el-table-column>
            <el-table-column label="关联医院" prop="hospital" align="center">
              <template slot-scope="scope">{{scope.row.hospital?scope.row.hospital.name:null}}</template>
            </el-table-column>
          </el-table>
          <div class="pagesCon">
            <div>
              <el-pagination
                :current-page="form2.page"
                :page-sizes="page_sizes"
                :page-size="form2.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page_totals"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
          <!-- 提交按钮 -->
          <div class="allCenter">
            <el-button type="primary" class="submitBtn" @click="submitFn()">确认选择</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  get_ticket_bind_project,
  project,
  ticket_bind_project,
  get_bind_hospital,
  isable_update
} from "@/api/ticketMange";
export default {
  props: {
    tab: {
      type: Number,
      default: () => {
        return null;
      }
    },
    activeId: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  filters: {
    // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date((e-0) * 1000).format("yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    }
  },
  data() {
    return {
      radio: "",
      tableData: [], //列表
      tableData3: [], //医院列表
      form2: {
        id: "",
        project_name: "",
        page: 1,
        pagesize: 10
      },
      dialogFormVisible: false, //弹窗
      only: "", //页面提交成功返回唯一的字段
      disabled: false, //提交成功后再次查看当前页,提交按钮禁用
      // 分页
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 0, // 总条目数,
      tableData1: [{}], //弹窗配置
      multipleSelection: [], //勾选数组
      fileList: [],
      is_update: true
    };
  },
  mounted() {
    if(this.activeId-0){
      this.hostlist();
      this.prodfn();
    }
    if (this.$route.query.type == "edit") {
      this.isable(this.$route.query.id - 0);
    }
  },
  watch: {},
  methods: {
    isable(id) {
      isable_update({ id: id }).then(res => {
        console.log("关联", res);
        if (res.data.code == 200) {
          this.is_update = res.data.data.is_update;
        }
      });
    },
    //关联医院列表
    async hostlist(id) {
      // console.log(123232233223)
      let res = await get_bind_hospital({ id: this.activeId });
      console.log("医院列表", res.data.data);
      if (res.data.code == 200) {
        this.tableData3 = res.data.data;
      }
    },
    //关联项目列表
    async prodfn(id) {
      let res = await get_ticket_bind_project({ id: this.activeId });
      console.log("项目列表", res);

      if (res.data.code == 200) {
        this.tableData = res.data.data;
      }
    },
    // 弹窗列表
    handleCoupons(data) {
      console.log(data, 2222);
      project(data)
        .then(res => {
          if (res.data.code == 200) {
            console.log("弹窗列表", res.data);
            this.tableData1 = res.data.data.data;
            this.page_totals = res.data.data.total;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    async NextSubmit() {
      let arr = [];
      this.tableData.map(res => {
        arr.push(res.id);
      });
      let res = await this.bindprofn({
        id: this.activeId,
        project_ids: arr.join(",")
      });
      console.log(res);
      if (res.data.code == 200) {
        this.$emit("push", this.tab, this.activeId);
      }
    },
    // 保存
    handleSubmit() {
      // this.$emit("prize", this.title, this.activeId);
      this.$router.push({ path: "/platformVoucher" });
    },
    // 配置弹窗
    handlePrize() {
      this.dialogFormVisible = true;
      /***自测 */
      // this.activeId = 2;
      console.log(this.activeId, this.tab);
      if (this.activeId && this.tab == "3") {
        this.form2.id = this.activeId;
        let data = {
          id: this.form2.id,
          page: this.form2.page,
          pagesize: this.form2.pagesize
        };
        this.handleCoupons(data);
      } else if (this.activeId && this.tab == "2") {
        this.form2.id = this.activeId;
        let data = {
          id: this.form2.id,
          page: this.form2.page,
          size: this.form2.pagesize
        };
        this.handleCoupons(data);
      }
    },
    // 弹窗确认
    submitFn() {
      this.tableData = this.tableData1.filter(res => {
        if (res.id == this.radio) return res;
      });

      if (this.tab == "2") {
        this.dialogFormVisible = false;
        //  this.tableData = this.multipleSelection;
      } else if (this.tab == "4") {
        this.dialogFormVisible = false;
        //  this.tableData = this.multipleSelection;
      }
    },
    //绑定项目
    async bindprofn(datas) {
      let res = await ticket_bind_project(datas);
      console.log(res);
      this.$message.success(res.data.msg);
      return res;
    },
    // 勾选行的id
    getRowKeys(row) {
      if (this.tab == "3") {
        return row.id;
      } else if (this.tab == "2") {
        return row.id;
      }
    },
    // 勾选的数组
    handleSelectionChange(val) {
      let arr = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        arr.push(item.id);
      });
    },
    // 删除
    handleDelete(index) {
      // let arr = [];
      this.tableData.splice(index, 1);
      // this.tableData.forEach(item => {
      //   arr.push(item.id);
      // });
    },
    // 弹窗名称查询
    handleSearch() {
      if (this.tab == "3") {
        this.form2.page = 1;
        this.handleCoupons(this.form2);
      } else if (this.tab == "2") {
        this.form2.page = 1;
        this.handleCoupons(this.form2);
      }
    },
    // 弹窗关闭清空勾选
    close() {
      if (this.tab == "3") {
        this.dialogFormVisible = false;
        this.form2 = {
          project_name: ""
        };
      } else if (this.tab == "2") {
        this.dialogFormVisible = false;
        this.form2 = {
          keyword: ""
        };
      }
    },

    // 改变页面条数-弹窗
    handleSizeChange(val) {
      if (this.tab == "3") {
        console.log("条数", this.form2);

        this.form2.pagesize = val;
        this.handleCoupons(this.form2);
      } else if (this.tab == "2") {
        this.form2.pagesize = val;
        this.handleCoupons(this.form2);
      }
    },
    // 选择页数-弹窗
    handleCurrentChange(val) {
      if (this.tab == "3") {
        console.log("页数", this.form2);

        this.form2.page = val;
        this.handleCoupons(this.form2);
      } else if (this.tab == "2") {
        this.form2.page = val;
        this.handleCoupons(this.form2);
      }
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style  scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mt_20 {
  margin-top: 20px;
}
.allCenter {
  text-align: center;
  margin: 20px;
}
</style>